<template>
	<view>
		<view v-if="info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view v-if="info!=null">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="index_drawer_task_content_box">
				<view class="index_drawer_task_tip">完成任务可得奖励</view>
				<scroll-view scroll-x="true" class="index_drawer_task_scroll">
					<view class="index_drawer_task_scroll_item" v-for="(data,index) in list"
						:key="index">
						<view class="index_drawer_task_scroll_item_zw">
							<view class="index_drawer_task_scroll_item_zw1"
								:style="{width:data.percent+'%'}"></view>
						</view>
						<view class="index_drawer_task_scroll_item_content">
							<view class="index_drawer_task_scroll_item_img">
								<view class="index_drawer_task_scroll_item_img_text">
									¥{{data.fee}}
								</view>
							</view>
							<view class="index_drawer_task_scroll_item_img_tip">{{data.number}}单奖励</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<view class="user_task_content_box">
				<view class="user_task_content_top_box">
					<view class="user_task_content_title_left">做任务赚现金</view>
					<view class="user_task_content_title_right" @click="goWallet()">
						奖励记录 <image
							src="https://www.cccshansong.com/chong_weapp/set_icon.png"
							mode=""></image>
					</view>
				</view>
				<view class="user_task_content_item_box">
					<view class="user_task_content_item" v-for="(data,index) in task_list" :key="index">
						<view class="user_task_content_item_left">
							<view class="user_task_content_item_icon">
								<image
									src="../../static/images/icon27.png"
									mode=""></image>
							</view>
							<view class="user_task_content_item_info">
								<view class="user_task_content_item_name">完成{{data.number}}单可得奖励</view>
								<view class="user_task_content_item_price">
									<image
										src="../../static/images/icon28.png"
										mode=""></image>+{{data.fee}}元
								</view>
							</view>
						</view>
						<view class="user_task_content_item_right">
							<view class="user_task_content_item_btn" v-if="data.is_complete==0" @click="goIndex()">去完成</view>
							<view class="user_task_content_item_btn user_task_content_item_btn1" v-if="data.is_complete==1">已完成</view>
						</view>
					</view>
					<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;padding-bottom: 50rpx;" >
						<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
						<view class="null_tip">这里空空如也~</view>
					</view>
				</view>
			</view>
			<view class="user_task_content_rule_box">
				<view class="user_task_content_rule_title">奖励规则</view>
				<view class="user_task_content_rule_desc">
					<view class="desc_box">
						<jyf-parser :html="content" ref="article" :tag-style="tagStyle"></jyf-parser>
					</view>
				</view>

			</view>
			<view style="height: 100rpx;"></view>
		</view>
		</view>
	</view>
</template>

<script>
	import zeroLoading from "@/components/zero-loading/components/zero-loading/zero-loading.vue"
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			jyfParser,
			navigationCustom,
			zeroLoading
		},
		data() {
			return {
				list: [],
				task_list:[],
				info: null,
				statusHeight: 0,
				config: {
					title: "我的任务", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
				content:'',
				tagStyle: {
					img: 'display: block;width: 100%!important;height:auto!important;',
					p:'margin-bottom: 10rpx;line-height: 50rpx;'
				},
			};
		},
		onLoad() {
			var a = this
			a.statusHeight =  uni.getSystemInfoSync().statusBarHeight  + 48
			a.getArticle()
		},
		onShow() {
			var a = this
			a.getTask()
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(65, 138, 255,1)'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
		},
		methods: {
			goIndex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			getArticle(){
				var a =this
				a.globalajax('common/getConfig',{
					value:'reward_rule'
					},'GET',function(res) {
						console.log(res);
						uni.stopPullDownRefresh()
						uni.hideLoading()
						if(res.data.code==200){
							const regex = new RegExp('<img', 'gi');
							var richtext = res.data.data
							richtext = richtext.replace(/<table[^>]*>/gi, '<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:12px;max-width:100%; text-align:left;text-indent: 0em;line-height:12px;">');
							a.content = richtext.replace(regex, `<img style="max-width: 100%;"`);
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			goWallet() {
				uni.navigateTo({
					url: '/pages/user/userWallet'
				})
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			getTask() {
				var a = this
				a.globalajax('user/task', {}, 'GET', function(res) {
					console.log(res);
					uni.hideLoading()
					if (res.data.code == 200) {
						a.info = res.data.data


						var arr = res.data.data.task_list
						var arr1 = res.data.data.task_list
						for (var i = 0; i < arr.length; i++) {
							arr[i].percent = 0
							arr[i].number = Number(arr[i].number)
						}
						var count = res.data.data.count

						// 获取上一个 number 的值
						var previousNumber = 0;

						// 遍历 arr 数组
						for (var i = 0; i < arr.length; i++) {
						    var currentNumber = parseInt(arr[i].number);

						    // 如果 count 大于等于当前 item 的 number
						    if (count >= currentNumber) {
						        arr[i].percent = 100;
						    }
						    // 如果 count 小于当前 item 的 number
						    else if (count < currentNumber) {
						        // 检查 count 是否在 previousNumber 和 currentNumber 之间
						        if (count > previousNumber) {
						            arr[i].percent = Math.round((count - previousNumber) / (currentNumber - previousNumber) * 100);
						        }
						        // 在找到合适的 percent 后，后续项全设置为 0
						        for (var j = i + 1; j < arr.length; j++) {
						            arr[j].percent = 0;
						        }
						        break; // 找到位置后可以退出循环
						    }

						    // 更新 previousNumber 为当前的 number
						    previousNumber = currentNumber;
						}

						arr1.forEach(item => {
							if (  count >= item.number) {
								item.is_complete = 1;
							} else {
								item.is_complete = 0;
							}
						});

						console.log('arr',arr)
						a.list = arr
						a.task_list = arr1

					} else {
						a.$showModal({
							title:'友情提示',
							content:res.data.msg,
							showCancel:false,
							confirmText:'我知道了',
							success: (res) => {
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}

	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height: 352rpx;
		background-image: url('../../static/images/png01.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;

		.user_task_content_rule_box {
			width: 702rpx;
			margin: 0 auto;
			margin-top: 32rpx;

			.user_task_content_rule_title {
				color: rgba(36, 40, 49, 1);
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom: 26rpx;
			}

			.user_task_content_rule_desc {
				color: rgba(96, 98, 102, 1);
				font-size: 28rpx;
				.desc_box{
					letter-spacing: 0rpx;
					color: #333333;
					// padding-top: 30rpx ;
					word-break: break-all;
					white-space:normal;
					word-wrap:break-word;
					word-break:break-word;
				}
			}
		}

		.user_task_content_box {
			width: 702rpx;
			// height: 702rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.user_task_content_item_box {
				.user_task_content_item {
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.user_task_content_item_right {
						margin-right: 24rpx;

						.user_task_content_item_btn {
							width: 180rpx;
							height: 58rpx;
							text-align: center;
							line-height: 58rpx;
							color: #fff;
							border-radius: 58rpx;
							background-color: #418AFF;
							font-size: 24rpx;
						}

						.user_task_content_item_btn1 {
							background-color: #fff;
							border: 2rpx solid #418AFF;
							color: #418AFF;
						}
					}

					.user_task_content_item_left {
						display: flex;
						align-items: center;

						.user_task_content_item_info {
							.user_task_content_item_name {
								color: rgba(48, 49, 51, 1);
								font-size: 30rpx;
								font-weight: bold;
								max-width: 340rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
							}

							.user_task_content_item_price {
								display: flex;
								align-items: center;
								color: #FF3C26;
								font-size: 20rpx;

								image {
									width: 26rpx;
									height: 26rpx;
									margin-right: 4rpx;
								}
							}
						}

						.user_task_content_item_icon {
							margin-left: 24rpx;
							margin-right: 14rpx;
							width: 80rpx;
							height: 80rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}


			}

			.user_task_content_top_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 2rpx solid rgba(228, 231, 237, 1);

				.user_task_content_title_left {
					color: rgba(36, 40, 49, 1);
					font-size: 32rpx;
					margin-left: 24rpx;
					font-weight: bold;
				}

				.user_task_content_title_right {
					display: flex;
					align-items: center;
					color: rgba(144, 147, 153, 1);
					font-size: 26rpx;

					image {
						margin-left: 8rpx;
						width: 32rpx;
						height: 32rpx;
						margin-right: 22rpx;
					}
				}
			}
		}

		.index_drawer_task_content_box {
			width: 702rpx;
			height: 240rpx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 24rpx;
			margin: 0 auto;
			margin-top: 22rpx;
			border: 2rpx solid rgba(255, 255, 255, 1);

			.index_drawer_task_scroll {
				margin-left: 16rpx;
				white-space: nowrap;
				width: 670rpx;
				height: 110rpx;
				background-color: #ffeee4;
				position: relative;
				border-radius: 16rpx;
				padding-top: 32rpx;

				.index_drawer_task_scroll_heng {
					position: absolute;
					top: 0;
					left: 0;
					background-color: rgba(255, 212, 187, 1);
					height: 24rpx;
					width: auto;
					border-radius: 14rpx;
				}

				.index_drawer_task_scroll_item {
					display: inline-flex;

					.index_drawer_task_scroll_item_zw {
						width: 98rpx;
						background-color: rgba(255, 212, 187, 1);
						height: 24rpx;
						border-radius: 14rpx;
						margin-left: -20rpx;
						margin-top: 22rpx;
						position: relative;

						.index_drawer_task_scroll_item_zw1 {
							background-color: #ff8147;
							position: absolute;
							top: 0;
							height: 24rpx;
							border-radius: 14rpx;
							width: 98rpx;
						}
					}

					.index_drawer_task_scroll_item_content {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: -20rpx;
						z-index: 10;
						position: relative;
						top: -15rpx;
						.index_drawer_task_scroll_item_img_tip {
							color: rgba(255, 107, 0, 1);
							font-size: 20rpx;
							margin-top: 8rpx;
						}

						.index_drawer_task_scroll_item_img {
							width: 84rpx;
							height: 80rpx;
							background-image: url('../../static/images/icon15.png');
							background-size: 100% 100%;
							position: relative;

							.index_drawer_task_scroll_item_img_text {
								width: 84rpx;
								position: absolute;
								text-align: center;
								top: 20rpx;
								left: 0;
								color: #FF3C26;
								font-size: 20rpx;
							}
						}
					}
				}

				.index_drawer_task_scroll_item:nth-child(1) {
					.index_drawer_task_scroll_item_zw {
						margin-left: 22rpx;
					}
				}
			}

			.index_drawer_task_tip {
				padding: 16rpx;
				color: #FF3C26;
				font-size: 32rpx;
				font-weight: bold;
				padding-top: 30rpx;
			}
		}
	}
</style>
